<!--舒文-->
<template>
  <div class="demo-input-suffix">
    供货商名称:
    <el-input v-model="input" placeholder="请输入供货商名称" style="width:320px"></el-input>
    <el-button type="primary" icon="el-icon-search">搜索</el-button><el-table
    :data="tableData.filter(data => !search
      || data.name.toLowerCase().includes(search.toLowerCase())
      || data.date.toLowerCase().includes(search.toLowerCase()))"
    height="500"
    style="width: 100%">
    <el-table-column>
      <el-table-column label="商品编码" prop="date"></el-table-column>
      <template slot="header" slot-scope="scope">
        <el-button size="mini" type="primary" class="el-icon-circle-plus-outline" @click="dialogTableVisible = true" style="float: left">添加</el-button>
      </template>
    </el-table-column>
    <el-table-column>
      <el-table-column label="商品名称" prop="name"/>
      <el-table-column label="供货商联系人" prop="contacts"/>
      <el-table-column label="联系人电话" prop="ContactPhone"/>
      <el-table-column label="供应商地址" prop="address"/>
      <el-table-column label="备注" prop="remarks"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table-column>

  </el-table>
    <el-dialog title="供货商名称:" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="name" label="商品名称" width="150"/>
        <el-table-column property="contacts" label="供货商联系人" width="200"/>
        <el-table-column property="ContactPhone" label="联系人电话"/>
        <el-table-column property="address" label="供应商地址"/>
        <el-table-column property="remarks" label="备注"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    input:{
      default:"",
      type:String,
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      formLabelWidth: '120px',
      gridData: [],
      tableData: [],
      search: '',
      supplierListOptions: [],
      ruleForm: {
        supplierId: null,
        payable: 0,
        paid: 0,
        date: '',
        remarks: '',
        isPaid: null
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        if (localRuleForm.brandId) {
          this.ruleForm = localRuleForm;
        } else {
          this.ruleForm.categoryId = localRuleForm.categoryId;
          this.ruleForm.categoryName = localRuleForm.categoryName;
        }
      }
    },
    backToPreStep() {
      this.$router.push('spu-add-new');
    },
    loadBrandList() {
      let url = 'http://176.201.102.31:8887/supplier/getComboboxList';
      console.log('url = ' + url);
      this.axios
        .create({
          'headers': {
            'Authorization':
              'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXRob3JpdGllc1RvU3RyaW5nIjoiW3tcImF1dGhvcml0eVwiOlwiL' +
              '2Jhc2ljRGF0YS9jdXN0b21lci5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2Jhc2ljRGF0YS9nb29kcy5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2' +
              'Jhc2ljRGF0YS9zdG9jay5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2Jhc2ljRGF0YS9zdXBwbGllci5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2Nv' +
              'bW1vbi9zdG9ja1NlYXJjaC5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2NvdW50L2N1c3RvbWVyLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCI' +
              'vY291bnQvcHVyY2hhc2UuaHRtbFwifSx7XCJhdXRob3JpdHlcIjpcIi9jb3VudC9zYWxlLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvY291b' +
              'nQvc2FsZURheS5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2NvdW50L3NhbGVNb250aC5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL2NvdW5' +
              '0L3N1cHBsaWVyLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvcG93ZXIvbG9nLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvcG93ZXIvcm9sZS' +
              '5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL3Bvd2VyL3VzZXIuaHRtbFwifSx7XCJhdXRob3JpdHlcIjpcIi9wdXJjaGFzZS9wdXJjaGFzZS5od' +
              'G1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL3B1cmNoYXNlL3B1cmNoYXNlU2VhcmNoLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvcHVyY2hhc2U' +
              'vcmV0dXJuLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvcHVyY2hhc2UvcmV0dXJuU2VhcmNoLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvc' +
              '2FsZS9yZXR1cm5TZWFyY2guaHRtbFwifSx7XCJhdXRob3JpdHlcIjpcIi9zYWxlL3NhbGVTZWFyY2guaHRtbFwifSx7XCJhdXRob3JpdHlcIjpc' +
              'Ii9zYWxlL3NhbGVvdXQuaHRtbFwifSx7XCJhdXRob3JpdHlcIjpcIi9zYWxlL3NhbGVyZXR1cm4uaHRtbFwifSx7XCJhdXRob3JpdHlcIjpcIi' +
              '9zdG9jay9hbGFybS5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL3N0b2NrL2RhbWFnZS5odG1sXCJ9LHtcImF1dGhvcml0eVwiOlwiL3N0b2Nr' +
              'L2RhbWFnZU92ZXJmbG93U2VhcmNoLmh0bWxcIn0se1wiYXV0aG9yaXR5XCI6XCIvc3RvY2svb3ZlcmZsb3cuaHRtbFwifV0iLCJpZCI6MSwiZX' +
              'hwIjoxNjcwOTA1MzU2LCJ1c2VybmFtZSI6ImFkbWluIn0.zDzjnDhy8_En34IIpZbQdGJylmz4QA2f0yz-wiT5qRk'
          }
        })
        .get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        // if (responseBody.state == 20000) {
        //   this.gridData = responseBody.data;
        // } else {
        //   this.$message.error(responseBody.message);
        // }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          let url = 'http://localhost:9080/brands/' + this.ruleForm.brandId;
          console.log('url = ' + url);
          this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.ruleForm.brandName = responseBody.data.name;
              let ruleFormString = JSON.stringify(this.ruleForm);
              console.log('ruleFormString >>> ' + ruleFormString);
              localStorage.setItem('ruleForm', ruleFormString);
              this.$router.push('spu-add-new3');
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.loadBrandList();
    this.loadLocalRuleForm();
  }
}
</script>
